<template>
    <div class="statistics">
        <h2 style="color: white;">平台用户总览与统计</h2>
        <div class="cards">
            <a-card class="statistic-card">
                <a-statistic title="总账户量" :value="totalAccounts" />
            </a-card>
            <a-card class="statistic-card">
                <a-statistic title="顾客数量" :value="customerCount" />
            </a-card>
            <a-card class="statistic-card">
                <a-statistic title="商家数量" :value="businessCount" />
            </a-card>
        </div>
        <!-- <a-card class="pie-chart-card">
        <a-pie :data="pieData" :height="300" />
      </a-card> -->
    </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue';
import request from '../../../util/request';
import { message } from 'ant-design-vue';
//   import { Pie } from '@ant-design/charts';

export default {
    name: 'AccountsStatistics',
    setup() {
        const customerCount = ref(0);
        const businessCount = ref(0);
        const totalAccounts = ref(0);
        //const pieData = ref([]);

        const fetchStatistics = () => {
            // 假设这里是获取统计数据的 API 调用
            //const response = await fetch('/api/statistics');
            //const data = await response.json();
            // totalAccounts.value = data.totalAccounts;
            // customerCount.value = data.customerCount;
            // businessCount.value = data.businessCount;
            // totalAccounts.value = 100;
            // customerCount.value = 80;
            // businessCount.value = 20;
            totalAccounts.value = 0;
            request.get('/account/list/customer').then(res => {
                customerCount.value = res.data.length;
                totalAccounts.value += res.data.length;
            }).catch(error => {
                message.error('获取顾客数据失败:', error);
            });
            request.get('/account/list/business').then(res => {
                businessCount.value = res.data.length;
                totalAccounts.value += res.data.length;
            }).catch(error => {
                message.error('获取商家数据失败:', error);
            });
        };
        //     // 准备饼状图数据
        //     pieData.value = [
        //       { type: '顾客', value: customerCount.value },
        //       { type: '商家', value: businessCount.value },
        //     ];
        //   };

        onMounted(fetchStatistics);

        return {
            totalAccounts,
            customerCount,
            businessCount,
        };
    },
};
</script>

<style scoped>
.statistics {
    padding: 24px;
    background: #1a1a1a;
    /* 暗色背景 */
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    color: #ffffff;
    /* 字体颜色为白色 */
}

.cards {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.statistic-card {
    flex: 1;
    background: rgba(255, 255, 255, 0.8);
    /* 微透明背景 */
}
</style>